<template>
  <div class="search-header">
    <van-nav-bar fixed>
      <template #left>
        <van-icon
          class="avatar"
          name="user-circle-o"
          @click="showMenu"
        ></van-icon>
      </template>
      <template #title>
        <van-search
          v-model="keyword"
          show-action
          placeholder="火博搜索"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <van-popup
      v-model="menuShow"
      position="left"
      :style="{width: '50%'}"
      :lock-scroll="true"
    >
      <div class="menu-wrap">
        <div class="user-info">
          <van-row v-if="$store.loginSuccess">
            <van-col :span="10" class="user-avatar">
              <van-icon name="user-circle-o"></van-icon>
            </van-col>
            <van-col :span="14" class="info">
              <p class="username">韩梅梅</p>
              <p>金币：42</p>
              <p>经验值：123</p>
            </van-col>
          </van-row>
          <van-row v-else class="no-login">
            <p>登录后操作敏感信息</p>
            <van-col :span="12">
              <van-button type="default">注册</van-button>
            </van-col>
            <van-col :span="12">
              <van-button type="primary">登录</van-button>
            </van-col>
          </van-row>
        </div>
        <div class="btn-wrap" @click="showMenu">
          <router-link to="/home">
            <i class="huobo huobo-home"></i>
            首页
          </router-link>
          <router-link to="/company">
            <i class="huobo huobo-company"></i>
            公司
          </router-link>
          <router-link to="/discounts">
            <i class="huobo huobo-discount"></i>
            优惠
          </router-link>
          <router-link to="/pedia">
            <i class="huobo huobo-baike"></i>
            百科
          </router-link>
          <router-link to="/qa">
            <i class="huobo huobo-qa"></i>
            问答
          </router-link>
          <router-link to="/guarantee">
            <i class="huobo huobo-guarantee"></i>
            担保
          </router-link>
          <router-link to="/crown">
            <i class="huobo huobo-crown"></i>
            皇冠
          </router-link>
          <router-link to="/bbs">
            <i class="huobo huobo-bbs"></i>
            论坛
          </router-link>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'SearchHeader',
  data() {
    return {
      keyword: '',
      menuShow: false
    };
  },
  methods: {
    // 菜单显隐
    showMenu() {
      this.menuShow = !this.menuShow;
    },
    // 搜索
    onSearch(value) {
      this.$emit('onSearch', value);
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../less/global';
  .search-header {
    .van-nav-bar {
      background-color: @mainBgColor;
      z-index: 100;
      .van-search {
        padding: 0;
        border-radius: 3px;
      }
      .avatar {
        font-size: 3rem;
        color: #ddd;
      }
    }
    .van-nav-bar /deep/ .van-nav-bar__title {
      max-width: 80%;
      margin-left: 6rem;
    }
    .van-nav-bar /deep/ .van-search__action {
      padding: 0 2rem;
    }


    .van-popup {
      height: 100vh;
      .menu-wrap {
        height: 100%;
        a {
          display: block;
          line-height: 3rem;
          text-align: center;
        }
        .user-info {
          background-color: #eee;
          padding: 2rem 0;
          min-height: 12rem;
          .user-avatar {
            text-align: center;
            font-size: 6rem;
            .van-icon {
              margin-top: 1rem;
            }
          }
          .info {
            .username {
              margin-top: 1rem;
              font-size: 1.6rem;
            }
          }
          .no-login {
            padding: 0 1rem;
            p {
              margin: 1rem 0;
            }
          }
        }
      }
      .btn-wrap {
        a {
          position: relative;
          line-height: 4rem;
          color: #888;
          ::before {
            position: absolute;
            left: 2rem;
          }
        }
      }
    }
  }
</style>
